<template>
  <div>
    <el-card>
      <el-form size="mini" :model="reportTemplate" :inline="true" label-width="80px">
        <!--基础表新增-->
        <el-row>
          <el-col :span="8">
            <my-form-item label="报表编号" size="mini">
              <!-- {{reportTemplate.tmpCode}} -->
              <el-input v-model="reportTemplate.tmpCode" disabled placeholder="请输入报表编号" autocomplete="off"></el-input>
            </my-form-item>
          </el-col>
          <el-col :span="8">
            <my-form-item label="报表名称" size="mini">
              <!-- {{reportTemplate.tmpName}} -->
              <el-input v-model="reportTemplate.tmpName" disabled placeholder="请输入报表名称" autocomplete="off"></el-input>
            </my-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="mini" @click="doAdd">新 增</el-button>
            <el-button type="primary" size="mini" @click="back">返 回</el-button>
          </el-col>
        </el-row>
        <!-- 文件上传 -->
      </el-form>
    </el-card>
    <!--表格手动加行-->
    <el-tabs type="border-card">
      <el-tab-pane label="科目明细">
        <el-table :data="newtableData" border style="width: 100%" size="mini">
          <el-table-column type="index" label="序号" align="center" width="60">
          </el-table-column>
          <el-table-column prop="subCode" align="center" label="科目编号">
          </el-table-column>
          <el-table-column prop="subName" align="center" show-overflow-tooltip label="科目名称">
          </el-table-column>
          <el-table-column prop="subStatus" align="center" show-overflow-tooltip label="计算标识" :formatter="subStatusFor">
            <template slot-scope="scope">
              <span style="color:red" v-if="scope.row.subStatus=='1'">是</span>
              <span v-if="scope.row.subStatus=='0'">否</span>
            </template>
          </el-table-column>
          <el-table-column prop="sortNum" align="center" show-overflow-tooltip label="排序">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="edit(scope.row)" size="mini">编辑</el-button>
              <el-button type="danger" @click="toDel(scope.row)" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="新增模板" :visible.sync="dialogTableVisible" :close-on-click-modal="false" width="300px">
      <el-form size="mini" :model="subFormData" ref="subFormData" label-width="80px" :rules="rules">
        <!--基础表新增-->

        <my-form-item label="科目编号" prop="subCode">
          <el-input v-model="subFormData.subCode" placeholder="请输入科目编号" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="科目名称" prop="subName">
          <el-input v-model="subFormData.subName" placeholder="请输入科目名称" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="计算标识" prop="subStatus">
          <el-radio-group v-model="subFormData.subStatus">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </my-form-item>

        <my-form-item label="排序字段" prop="sortNum">
          <el-input v-model="subFormData.sortNum" placeholder="请输入排序字段" autocomplete="off"></el-input>
        </my-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleFormClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="doSave">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newtableData: [],
      dialogTableVisible: false,
      reportTemplate: {
        tmpCode: this.$route.query.tmpCode,
        tmpName: this.$route.query.tmpName,
        tmpType: this.$route.query.tmpType
      },
      subFormData: {
        id: "",
        subCode: "",
        subName: "",
        subStatus: "",
        sortNum: ""
      },
      rules: {
        subCode: [
          {
            required: true,
            message: "请输入科目编号",
            trigger: "blur"
          }
        ],
        subName: [
          {
            required: true,
            message: "请输入科目名称",
            trigger: "blur"
          }
        ],
        subStatus: [
          {
            required: true,
            message: "请选择计算标识",
            trigger: "change"
          }
        ],
        sortNum: [
          {
            required: true,
            message: "请输入排序字段",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    //table翻译 求和标识
    subStatusFor: function(row, column) {
      return row.subStatus == "1" ? "是" : "否";
    },
    // 关闭弹窗
    handleFormClose() {
      this.subFormData.id = "";
      this.subFormData.subCode = "";
      this.subFormData.subName = "";
      this.subFormData.subStatus = "";
      this.dialogTableVisible = false;
    },
    //新增
    doAdd() {
      this.subFormData.id = "";
      this.subFormData.subCode = "";
      this.subFormData.subName = "";
      this.subFormData.subStatus = "0";
      this.subFormData.sortNum = "";
      this.dialogTableVisible = true;
    },
    //查询
    getList() {
      let params = {
        finId: this.$route.query.tempId
      };
      this.$api
        .formPost("/api/biz/finTemplate/doGetListSub", params)
        .then(res => {
          if (res.retHead.code === "0000000") {
            this.newtableData = res.retBody;
          }
        });
    },
    //编辑
    edit(row) {
      console.log(row);
      this.subFormData.id = row.id;
      this.subFormData.subCode = row.subCode;
      this.subFormData.subName = row.subName;
      this.subFormData.subStatus = row.subStatus;
      this.subFormData.sortNum = row.sortNum;
      this.dialogTableVisible = true;
    },
    // 保存
    doSave() {
      this.$refs.subFormData.validate(valid => {
        if (valid) {
          let user = JSON.parse(sessionStorage.getItem("user"));
          let params = {};
          if (this.subFormData.id == "") {
            params = {
              finId: this.$route.query.tempId,
              subCode: this.subFormData.subCode,
              subName: this.subFormData.subName,
              subStatus: this.subFormData.subStatus,
              sortNum: this.subFormData.sortNum,
              createUserId: user.id,
              createUserName: user.realName,
              createTime: new Date()
            };
          } else {
            params = {
              id: this.subFormData.id,
              subCode: this.subFormData.subCode,
              subName: this.subFormData.subName,
              subStatus: this.subFormData.subStatus,
              sortNum: this.subFormData.sortNum
            };
          }
          this.$api
            .formPost("/api/biz/finTemplate/doSaveSub", params)
            .then(res => {
              if (res.retHead.code == "0000000") {
                if (this.subFormData.id == "") {
                  this.$message({
                    type: "success",
                    message: "保存成功!"
                  });
                } else {
                  this.$message({
                    type: "success",
                    message: "编辑成功!"
                  });
                }
                this.dialogTableVisible = false;
                this.getList();
              }
            });
        } else {
          this.$message.error("请完善表单");
          return false;
        }
      });
    },

    toDel(row) {
      let that = this;
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.del(row);
        })
        .catch(() => {});
    },
    del(row) {
      this.$api
        .formPost("/api/biz/finTemplate/doRmBySubId", {
          id: row.id
        })
        .then(res => {
          if (res.retHead.code === "0000000") {
            this.$message({
              type: "info",
              message: "删除成功"
            });
            this.getList();
          } else {
            this.$message({
              type: "info",
              message: res.retHead.message
            });
          }
        });
    },
    back() {
      this.$router.go(-1); //返回上一层
    }
  }
};
</script>


